<!--备案管理-->
<template>
<div class="page-box">
    <el-radio-group v-model="baType" size="medium" class="mb20">
      <el-radio-button label="规划备案">规划备案</el-radio-button>
      <el-radio-button label="许可备案">许可备案</el-radio-button>
      <el-radio-button label="停靠点备案">停靠点备案</el-radio-button>
    </el-radio-group>
    <div class="search-box">
        <el-form :inline="true" :model="searchForm" size="medium">
            <el-form-item label="">
                <el-select v-model="searchForm.unit" placeholder="单位名称">
                <el-option label="孝感市水利和湖泊局" value="1"></el-option>
                <el-option label="孝南区水利和湖泊局" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="">
                <el-input v-model="searchForm.keyword" placeholder="关键字搜索"></el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-model="searchForm.timeRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
        <el-button type="primary" size="medium" class="search-right-btn" @click="handleAdd">添加{{baType}}</el-button>
    </div>
    <div class="table-box">
        <el-table
            :data="tableData"
            border
            size="medium"
            height="calc(100vh - 370px)"
            style="width: 100%">
            <el-table-column align="center" label="序号" type="index"  width="60"></el-table-column>
            <el-table-column align="center" label="县市" prop="region" width="180"></el-table-column>
            <el-table-column align="center" label="泵站名称" prop="name" width="180"></el-table-column>
            <el-table-column align="center" label="开机台数" prop="kjts">
                <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.kjts" @input="handleVal(scope)"></el-input>
                </template>    
            </el-table-column>
            <el-table-column align="center" label="开机千瓦数" prop="kjqws">
                <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.kjqws"></el-input>
                </template>
            </el-table-column>
            <el-table-column align="center" label="开机流量" prop="kjll" width="180">
                <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.kjll" fom></el-input>
                </template>
            </el-table-column>
            <el-table-column align="center" label="水位" prop="sw" width="180">
                <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.sw"></el-input>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="160">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :current-page="pageNo"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
    <Ghba v-if="ghbaShow" :dialogShow="ghbaShow" @sure="handleSure" @cancel="cancel" :id="ghid"></Ghba>
</div>
</template>

<script>
import Ghba from './ghba-dialog'
export default {
    components: { Ghba },
    data() {
        return {
            baType:'规划备案',
            searchForm:{
                unit:'',
                keyword:'',
                timeRange:[]
            },
            tableData:[
                { region: '孝南',name:"野猪湖", kjts: '',kjqws:'', kjll: '', sw: '' },
                { region: '孝南',name:"鲢鱼地", kjts: '',kjqws:'', kjll: '', sw: '' },
                { region: '汉川',name:"分水", kjts: '',kjqws:'', kjll: '', sw: '' },
                { region: '汉川',name:"大沙", kjts: '',kjqws:'', kjll: '', sw: '' },
                { region: '应城',name:"夹河沟", kjts: '',kjqws:'', kjll: '', sw: '' },
                { region: '云梦',name:"公路口", kjts: '',kjqws:'', kjll: '', sw: '' },
            ],
            pageSize:10,
            pageNo:1,
            total:16,
            ghbaShow:false,
            ghid:'',

            prop:''
        }
    },
    created(){},
    methods: {
        // 表格数据操作
        handleVal(v){
            v.row.kjqws = v.row.kjts * 1700;
            v.row.kjll = v.row.kjts * 20
        },
        handleEdit(index,val){},
        handleDelete(index,val){
            console.log(val)
            this.$confirm('已选项目【'+val.name+'】, 是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('删除成功!');
            }).catch(() => {});
        },
        // 分页操作
        handleSizeChange(val){
            this.pageSize = val;
        },
        handleCurrentChange(val){
            this.pageNo = val;
        },
        // 新增操作
        handleAdd(){
            this.ghbaShow = true
        },
        // 确认操作
        handleSure(msg){
            this.$message.success(msg||'操作成功')
            this.ghbaShow = false;
        },
        // 取消操作
        cancel(){
            this.ghbaShow = false;
        }
    }
}
</script>
<style lang="scss" scoped>
.page-box{
    height: 100%;
    overflow: hidden;
}
</style>